<template>
  <div class="orderInfo">
    <navBar :title="details.order_number" @onClickLeft="onClickLeft" />
    <!-- <a class="file-details"  :href="`${baseUrls}/api/download?path=orderFile/20200906/pkq.jpeg`" download='orderFile/20200906/pkq.jpeg' >123123</a> -->

    <div class="orderInfo-content">
      <van-collapse v-model="activeClass">
        <van-collapse-item title="流程进度" name="1">
          <div class="steps-box">
            <van-steps direction="vertical">
              <van-step :border="false" v-for="(data, index) in details.statuss" :key="index">
                <template slot="active-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <template slot="inactive-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <div class="step-title">
                  <span>{{data.pivot.describe}}</span>
                </div>
                <div class="step-info">
                  <span>{{data.pivot.created_at}}</span>
                </div>
              </van-step>
            </van-steps>
          </div>
        </van-collapse-item>
        <van-collapse-item title="订单信息" name="2">
          <van-cell :border="false" title="订单状态" :value="details.status | status">
            <template #default>
              <span :class="details.status | statusColor">{{details.status | status}}</span>
            </template>
          </van-cell>
          <van-cell
            v-if="details.status == 6"
            :border="false"
            title="退回原因"
            label-class="font_danger ml10"
            :label="details.order_record && details.order_record.reason"
          />
          <van-collapse-item title="服务文件" name="3">
            <!-- <van-cell
              :border="false"
              
              class="service_file"
              
            >
              <template #default>
                
              </template>
            </van-cell>-->
            <a
              v-for="(item,index) in details.serviceFiles"
              :key="index"
              class="f20 btn_text files"
              :href="item"
              :download="details.item"
            >
              <van-icon name="orders-o" />
            </a>
          </van-collapse-item>
          <van-cell title="发票文件" :border="false" v-if="details.invoice_file">
            <template #default>
              <a
                class="f20 btn_text"
                :href="details.invoice_file"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="balance-list-o" />
              </a>
            </template>
          </van-cell>
          <van-cell :border="false" title="代办事项" :value="details.service_project | project" />
          <van-cell :border="false" title="服务类型" :value="details.service_type | type" />
          <van-cell :border="false" title="服务时间" :value="time" />
          <template v-if="orderPayStatus">
            <van-cell
              value-class="originPrice"
              :border="false"
              title="原价"
              :value="details.pay_info && details.pay_info.original_price + '元'"
            />
            <van-cell
              :border="false"
              title="应缴金额"
              :value="details.pay_info && details.pay_info.real_price  + '元'"
            />
          </template>
          <van-cell
            :border="false"
            title="公务卡支付"
            :value="details.is_official_card == 1 ? '是' : '否'"
          />
          <van-cell title="签字文件" :border="false" v-if="details.sign_file">
            <template #default>
              <a
                class="f20 btn_text"
                :href="details.sign_file"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="records" class="f20" />
              </a>
            </template>
          </van-cell>
          <van-cell title="OA截图" :border="false" v-if="details.oa_img">
            <template #default>
              <a
                class="f20 btn_text"
                :href="details.oa_img"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="photo" />
              </a>
            </template>
          </van-cell>
          <van-cell
            v-if="details.rmb_voucher"
            :border="false"
            title="报销凭证号"
            :value="details.rmb_voucher"
          />
          <van-cell :border="false" title="创建时间" :value="details.created_at" />
          <van-collapse-item title="代报员信息" name="4" v-if="showErrandsInfo">
            <van-cell :border="false" title="代报员" :value="details.errands && details.errands.name" />
            <van-cell
              :border="false"
              title="联系电话"
              :value="details.errands && details.errands.phone"
            />
            <van-cell
              :border="false"
              title="收件人姓名"
              :value="details.errands && details.errands.errand_info && details.errands.errand_info.address_name"
            />
            <van-cell
              :border="false"
              title="收件人电话"
              :value="details.errands && details.errands.errand_info && details.errands.errand_info.address_phone"
            />
            <van-cell
              :border="false"
              title="收件人地址"
              :value="details.errands && details.errands.errand_info && details.errands.errand_info.address"
            />
            <van-cell
              :border="false"
              title="收件人邮编"
              :value="details.errands && details.errands.errand_info && details.errands.errand_info.address_postcode"
            />
          </van-collapse-item>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="btn-box-flex">
      <van-button type="info" block @click="updateOrder" class="mb15" v-if="showUpdateOrder">补充订单</van-button>
      <van-button type="info" block @click="goPay" v-if="orderPayStatus">去支付</van-button>
      <van-button type="info" block @click="orderConfirm" v-if="details.status == 3">确认结单</van-button>
      <van-button
        type="info"
        block
        @click="orderCancel"
        v-if="details.status == 1 || details.status == 5"
      >取消订单</van-button>
    </div>
    <orderCancel ref="orderCancel" />
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { getOrderInfo, orderConfirm } from "@a/order.js";
import { Dialog, Toast } from "vant";
import orderCancel from "../components/orderCancel.vue";
export default {
  components: {
    navBar,
    orderCancel,
  },
  data() {
    return {
      details: {
        order_number: "",
      },
      // activefils: ["2"],
      activeClass: ["2"],
      baseUrls: process.env.VUE_APP_BASE_URL,
      originUrl: process.env.VUE_APP_ORIGIN_URL,
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  created() {
    this.init();
  },
  computed: {
    time() {
      return (this.details.service_time || this.details.rush_time || 0) + "天";
    },
    orderPayStatus() {
      if (this.details.pay_info) {
        return this.details.pay_info.status == 1 ? false : true;
      } else {
        return false;
      }
    },
    showUpdateOrder() {
      if (this.details.status == 3 || this.details.status == 4) {
        return false;
      } else {
        return true;
      }
    },
    showErrandsInfo() {
      let arr = [2, 3, 4, 6, 7];
      if (arr.includes(this.details.status)) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    onClickLeft() {
      this.$router.replace("/user/home");
    },
    cancel() {
      this.$router.replace("/user/home");
    },
    init() {
      this.$loading();
      let params = {
        order_id: this.$route.params.id,
      };
      if (this.$route.query && this.$route.query.order_id) {
        params.order_id = this.$route.query.order_id;
      }
      getOrderInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.$loadingClear();
            this.details = res.data;
            this.details.serviceFiles = this.details.service_file.split("&");
          }
        })
        .catch((error) => {
          this.$loadingClear();
        });
    },
    goPay() {
      this.$router.push({
        path: "/pay/payMethod",
        query: {
          pay_info_id: this.details.pay_info.id,
          front_url: `${this.originUrl}/user/home/details/${this.details.id}`,
          order_id: this.details.id,
        },
      });
    },
    updateOrder() {
      this.$router.push({
        path: "/user/home/supplement",
        query: {
          order_id: this.$route.params.id,
        },
      });
    },
    orderConfirm() {
      Dialog.confirm({
        title: "提示",
        message: "您是否确认订单已经完成？",
        cancelButtonText: "在看看",
      })
        .then(() => {
          this.orderConfirmPost();
        })
        .catch(() => {});
    },
    orderConfirmPost() {
      let params = {
        order_id: this.$route.params.id,
        pass: "yes",
      };
      orderConfirm(params).then((res) => {
        if (res.code == 200) {
          Toast.success("订单已完成");
          this.$router.push("/user/home");
        }
      });
    },
    orderCancel() {
      this.$refs["orderCancel"].show(this.$route.params.id);
    },
  },
  filters: {},
};
</script>

<style lang='less' scoped>
.orderInfo {
  height: 100%;
  width: 100%;
  &-content {
    padding-bottom: 70px;
    box-sizing: border-box;
    .steps-box {
      /deep/.van-steps {
        .van-hairline.van-step.van-step--vertical.van-step--finish {
          .van-step__line {
            background-color: #1996ff;
          }
        }

        .van-hairline.van-step.van-step--vertical:last-child {
          .van-step__line {
            display: none;
          }
        }

        .van-step__circle-container {
          z-index: 1;
          background-color: #fff;
        }

        // 激活的图标
        .activeIcon {
          padding: 2px;
          box-sizing: border-box;
          width: 11px;
          height: 11px;
          border-radius: 50%;
          border: 1px solid #068eff;

          > div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #068eff;
          }
        }

        // 未激活的图标
        .inactiveIcon {
          position: relative;

          width: 11px;
          height: 11px;
          border-radius: 50%;
          border: 1px solid #068eff;
        }

        .step-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.373333rem;
          font-weight: 700;
          color: #353535;

          .button {
            padding: 0 10px;
            font-size: 12px;
            background-color: #c8c8c8;
            border-radius: 7.5px;
            font-size: 12px;
            height: 16px;
            line-height: 15px;
            font-weight: 500;
          }
        }

        .step-info {
          color: #353535;
          font-size: 12px;

          > div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
          }
        }
      }
    }
    .originPrice {
      span {
        text-decoration: line-through;
      }
    }
    .file-details {
      text-decoration: underline;
    }
    .files {
      display: inline-block;
      margin-right: 15px;
    }
  }
}
</style>